<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
  </ul>
  <script>
    // 函数作用域
    //----- 全局函数  页面任意位置调用的函数
    //----- 局部函数  只能在函数内部调用的函数
    // 变量作用域
    //------ 全局变量 页面任意位置调用的变量  函数外部声明 或在函数内部不带var 的变量
    //------- 局部变量 ---函数内部用var声明的变量  函数内部访问

    //  全局作用域  
    //  局部作用域

    // 作用域链   当函数内部访问变量 采取就近原则 如果本函数为找到 向父级作用域 查找 形成作用域链
    var x = 80;
    function say() {
      // var x = 90;
      function run() {
        // var x = 100;
        console.log(x)
      }
      run()
    }
    say()
    //
    // 块级作用域  let 和 const  声明变量产生块级作用  for(){} if(){} 
    // var x = 0;
    // if (true) {
    //   var x = 9;
    // }
    // console.log(x)

    var x = 0;
    if (true) {
      // console.log(x)//报错 3。let 声明的变量不存在变量提升
      let x = 9; //let  1.创建变量 会产生局部作用域  x 为局部变量
      // let x = 88; //2 let 不能重复声明

    }
    console.log(x)
    // 变量提升  函数内部声明的变量  自动把声明变量提前 后赋值
    function man() {
      // var x;
      // var y;
      console.log(x)
      var x = 99;
      var y = 88;
    }
    man()

    var lis = document.getElementsByTagName("li")
    for (let i = 0; i < lis.length; i++) {
      // lis[i].index = i;
      lis[i].onclick = function () {
        alert(i)
      }
    }

    // const 声明常量  1.  不能重复声明 
    //  2. 声明后不能改变值
    //3 产生块级作用域
    // 4 不存在变量提升
    const name = "张三"
    // name = "李四"
    const obj = {
      name: "李思",
      data: { name: 1, age: 2 },
      age: 88
    }
    obj.age = 99;
    console.log(obj)
    //  动态作用域--------------------
    function foo() {
      console.log(a);
    }
    function bar() {
      var a = 3;
      foo();//2
    }
    var a = 2;
    bar();
  </script>
</body>

</html>